<template>
  <div class="box1" v-loading="loading">
    <div class="bgBlock">
      <el-divider content-position="left"><h2>基本信息</h2></el-divider>
      <div class="fontInfo">
        <p style="width: 50%">
          任务名称：<span>{{ data.taskName }} </span>
        </p>
        <p style="width: 50%">
          任务描述：<span>{{ data.desc }} </span>
        </p>
        <p style="width: 50%">
          批次最大：<span>{{ data.readerBatch }} </span>
        </p>
        <p style="width: 50%">
          工作模式：<span>{{ data.jobMode }} </span>
        </p>
        <p style="width: 50%">
          任务模式：<span>{{ data.start }} -- {{ data.end }}</span>
        </p>
        <p style="width: 50%">
          任务状态：<span>{{ data.status }}</span>
        </p>
        <p style="width: 50%">
          异常处理：<span>{{ data.taskPolicy }}</span>
        </p>
      </div>
    </div>
    <div class="bgBlock">
      <el-divider content-position="left"><h2>数据源信息</h2></el-divider>
      <div class="fontInfo">
        <p style="width: 40%" v-if="dbData.source && dbData.sink">
          源库名称：<span>{{ data.sourceName || "空" }} </span>
        </p>
        <p style="width: 40%">
          源库主机名：<span>{{ dbData.source && dbData.source.ip }} </span>
        </p>
        <p style="width: 40%">
          源库端口：<span>{{ dbData.source && dbData.source.port }} </span>
        </p>
        <p style="width: 40%">
          源库用户名称：<span>{{ dbData.source && dbData.source.uname }} </span>
        </p>
        <el-divider></el-divider>
        <p style="width: 40%">
          目标库名称：<span>{{ data.sinkName || "空" }} </span>
        </p>
        <p style="width: 40%">
          目标库主机名：<span>{{ dbData.sink && dbData.sink.ip }} </span>
        </p>
        <p style="width: 40%">
          目标库端口：<span>{{ dbData.sink && dbData.sink.port }} </span>
        </p>
        <p style="width: 40%">
          目标库用户名称：<span>{{ dbData.sink && dbData.sink.uname }} </span>
        </p>
      </div>
    </div>
    <div class="bgBlock">
      <el-divider content-position="left"><h2>任务选择</h2></el-divider>
      <div class="fontInfo">
        <p style="width: 35%">
          源库：<span>{{ data.sourceDatabase || data.sourceDataSchema }} </span>
        </p>
        <p style="width: 35%">
          目标库：<span>{{ data.sinkDatabase || data.sinkDataSchema, }} </span>
        </p>
        <p style="width: 100%; overflow: hidden">
          指定模式：<span>{{ scpoeList.join(",") }} </span>
        </p>
      </div>
    </div>
    <div class="bgBlock" v-if="data.jobMode == 'STREAMING' && data.syncStatus">
      <el-divider content-position="left"><h2>同步配置</h2></el-divider>
      <div class="fontInfo">
        <p style="width: 50%" v-for="item in dictOptions" :key="item.value">
          {{ item.label }}：<span>{{ data.syncConf[item.value] }} </span>
        </p>
      </div>
    </div>
    <div class="bgBlock" v-if="data.monitorStatus">
      <el-divider content-position="left"><h2>任务调度</h2></el-divider>
      <div class="fontInfo">
        <p style="width: 50%">
          任务名称：<span>{{ data.monitorConf.jobName }} </span>
        </p>
        <p style="width: 50%">
          任务分组：
          <template v-for="dict in dict.type.sys_job_group">
            <span
              :key="dict.value"
              v-if="data.monitorConf.jobGroup == dict.value"
              >{{ dict.label }}
            </span>
          </template>
        </p>
        <p style="width: 50%">
          cron表达式：<span>{{ data.monitorConf.cronExpression }} </span>
        </p>
        <p style="width: 50%">
          状态：<span v-for="dict in dict.type.sys_job_status" :key="dict.value"
            >{{ data.monitorConf.status == dict.value ? dict.label : "" }}
          </span>
        </p>
        <p style="width: 50%">
          执行策略：<span v-if="data.monitorConf.misfirePolicy == 1"
            >立即执行
          </span>
          <span v-if="data.monitorConf.misfirePolicy == 2">执行一次 </span>
          <span v-if="data.monitorConf.misfirePolicy == 3">放弃执行 </span>
        </p>
      </div>
    </div>

    <div class="bgBlock" v-if="data.jobMode == 'BATCH' && data.batchStatus">
      <el-divider content-position="left"><h2>批量同步配置</h2></el-divider>
      <div class="fontInfo">
        <el-table
          border
          :data="batchConf"
          style="width: 100%; margin-top: 15px"
          :height="300"
        >
          <el-table-column prop="instanceName" label="表名">
            <template slot-scope="scope">
              <span>{{ scope.instanceName || data.sourceDatabase }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="tableName" label="字段名" />
          <el-table-column label="同步方式" prop="syncType">
            <template slot-scope="scope">
              <span
                v-for="item in dict.type.data_sync_batch_type"
                :key="item.value"
                >{{ item.value == scope.row.syncType ? item.label : "" }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="sortBy" label="排序方式" />
          <el-table-column label="自定义" prop="ruleType">
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.columns && scope.row.columns.length == 0"
                size="mini"
                type="text"
                @click="handleView(scope.row, scope.$index)"
                >查 看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="radioBox">
      <p>
        创建后运行模式：
        <el-radio-group v-model="data.strategy">
          <el-radio
            v-for="dict in dict.type.task_strategy"
            :key="dict.value"
            :label="dict.value"
            >{{ dict.label }}</el-radio
          >
        </el-radio-group>
      </p>
    </div>
    <el-dialog
      title="自定义脚本"
      :visible.sync="dialogVisible"
      width="80%"
      v-if="batchConf && batchConf[scriptIndex]"
    >
      <el-table
        border
        :data="batchConf[scriptIndex].columns"
        style="width: 100%; margin-top: 15px"
        :height="250"
        :key="updateTable"
      >
        <el-table-column prop="column" label="字段名" />
        <el-table-column prop="rule" label="读-规则模板">
          <template slot-scope="scope">
            <div>{{ scope.row.readRule.rule }}</div>
          </template>
        </el-table-column>
        <el-table-column label="读-规则类型" prop="ruleType">
          <template slot-scope="scope">
            <div>{{ scope.row.readRule.ruleType }}</div>
          </template>
        </el-table-column>
        <el-table-column label="读-脚本" prop="ruleType">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="
                scope.row.readRule.ruleType == 'DEFAULT' ||
                scope.row.readRule.ruleContent.length == 0
              "
              @click="handleViewCode(scope.row, 'readRule')"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="rule" label="写-规则模板">
          <template slot-scope="scope">
            <div>{{ scope.row.writeRule.rule }}</div>
          </template>
        </el-table-column>
        <el-table-column label="写-规则类型" prop="ruleType">
          <template slot-scope="scope">
            <div>{{ scope.row.writeRule.ruleType }}</div>
          </template>
        </el-table-column>
        <el-table-column label="写-脚本" prop="ruleContent">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="
                scope.row.writeRule.ruleType == 'DEFAULT' ||
                scope.row.writeRule.ruleContent.length == 0
              "
              @click="handleViewCode(scope.row, 'writeRule')"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="groovy脚本"
      :visible.sync="dialogGroovyCodeVisible"
      width="80%"
      :key="updateTable"
    >
      <codeEditor
        ref="codeEditor"
        :editorHight="300"
        :codeData="groovyCode"
        valueCodeLang="groovy"
        :readOnly="true"
        :key="updateTable"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogGroovyCodeVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditCodeEnter">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Vue from "vue";
import codeEditor from "@/components/CodeEditor/index.vue";

import { listDatasourceInfo } from "@/api/console/datasourceInfo";
import { convertToCamelCase } from "@/utils/index.js";

export default {
  components: { codeEditor },
  props: ["data"],
  dicts: [
    "task_strategy",
    "sys_job_status",
    "data_sync_batch_type",
    "database_datatype",
    "sys_job_group",
  ],
  data() {
    return {
      updateTable: 0,
      loading: false,
      groovyCode: "",
      dialogGroovyCodeVisible: false,
      dialogVisible: false,
      countmodeInfo: [],
      taskmodeInfo: [],
      taskTables: [],
      dictOptions: [],
      scriptIndex: null,
      dbData: {},
      batchConf: [],
      scpoeList: [],
    };
  },
  created() {
    let that = this;
    that.loading = true;
    if (!this.$props.data.strategy) {
      Vue.set(this.$props.data, "strategy", "2");
    }
    this.batchConf = this.$props.data.jdbc;
    this.getDicts("synchronous_tasktypescope").then((res) => {
      res.data.forEach((f) => {
        if (that.$props.data.taskTypeScope.indexOf(f.dictValue) != -1) {
          this.scpoeList.push(f.dictLabel);
        }
      });
    });

    this.getDicts("conf_sync_dict").then((res) => {
      res.data.forEach((item) => {
        if (this.$props.data.syncConf[convertToCamelCase(item.dictValue)]) {
          this.dictOptions.push({
            label: item.dictLabel,
            value: convertToCamelCase(item.dictValue),
          });
        }
      });
    });
  },
  async mounted() {
    let that = this;
    const dictItem = await this.getDicts("database_datatype");
    const example = dictItem.data.filter((f) => f.dictLabel == "实例");
    const sourceInfo = {
      type: that.$props.data.start,
      dataType: example[0].dictValue,
      startNum: 0,
      pgSize: 999,
    };
    let sourceData = await listDatasourceInfo(sourceInfo);
    sourceInfo.type = that.$props.data.end;
    let sinkData = await listDatasourceInfo(sourceInfo);
    sourceData = sourceData.rows.find(
      (f) => f.dataSourceName == this.$props.data.sourceName
    );
    sinkData = sinkData.rows.find(
      (f) => f.dataSourceName == this.$props.data.sinkName
    );
    if (sourceData && sinkData) {
      this.dbData = {
        source: sourceData,
        sink: sinkData,
      };
    }
    this.loading = false;
  },
  methods: {
    handleEditCodeEnter() {
      this.dialogGroovyCodeVisible = false;
    },
    handleViewCode(row, type) {
      this.groovyCode = row[type].ruleContent;
      this.updateTable = Math.random();
      this.dialogGroovyCodeVisible = true;
    },
    handleView(row, index) {
      this.scriptIndex = index;
      this.dialogVisible = true;
    },
    onSubmit() {},
    connectMode(v, j) {},
  },
};
</script>

<style lang="scss" scoped>
.box1 {
  margin: 40px auto;
  .bgBlock {
    border: 1px solid #dcdfe6;
    width: 100%;
    margin: 20px 0;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 1px #f8f8f8;
  }

  h2 {
    font-weight: 700;
    font-size: 20px;
    color: rgb(64, 158, 255);
  }

  span {
    font-weight: 500;
    font-size: 16px;
  }

  .fontInfo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 10px;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    // justify-content: space-between;
    font-size: 16px;
    p {
      width: 25%;
    }
  }

  .radioBox {
    text-align: right;
    font-weight: 700;

    p {
      margin-bottom: 0;
    }
  }
}

.el-col-1 {
  margin-top: 5px !important;
}

span {
  vertical-align: middle;
  font-size: 14px;
  color: #606266;
  margin: 0;
  font-weight: 600;

  button {
    margin-left: 15px;
  }
}
</style>
